<template>
	<view class="content">
		<health-title @timeBack="timeBack" :borderBottom="false" height="100" Title="情绪" :showWeek="false"></health-title>
		<view class="">
			<view class="chart-box">
				<view class="title _df">
					<view class="" v-if="dateType == '日'">
						<image v-if="topData.status=='难过'" src="@/static/img/index/emoji3.png" mode=""></image>
						<image v-else-if="topData.status=='不安'" src="@/static/img/index/emoji2.png" mode=""></image>
						<image v-else-if="topData.status=='平静'" src="@/static/img/index/emoji5.png" mode=""></image>
						<image v-else-if="topData.status=='不错'" src="@/static/img/index/emoji1.png" mode=""></image>
						<image v-else-if="topData.status=='愉悦'" src="@/static/img/index/emoji4.png" mode=""></image>
					</view>
					<view class="dw" style="margin-right: 10rpx;">
						{{dateType == '日'?topData.status:'情绪值范围：'}}
					</view>
					<view class="num">
						{{topData.value}}
					</view>
					<view class="time" v-if="dateType == '日'">
						{{topData.createTime}}
					</view>
				</view>
				
				<view ref="chart" id="chart" class="chart">
					<view class="img" v-if="isEmpty">
						<image src="@/static/img/index/echart.png" mode=""></image>
						<view class="txt">
							暂无数据
						</view>
					</view>
					<l-echart ref="chartRef"></l-echart>
				</view>
				<view class="tip-box _df _jc">
					<view class="item" v-for="(item,index) in tipList" :key="index">
						<view class="name _df _jc">
							<image class="icon" v-if="item.valueData == '5'" src="@/static/img/index/emoji3.png" mode=""></image>
							<image class="icon" v-else-if="item.valueData=='4'" src="@/static/img/index/emoji2.png" mode=""></image>
							<image class="icon" v-else-if="item.valueData=='3'" src="@/static/img/index/emoji5.png" mode=""></image>
							<image class="icon" v-else-if="item.valueData=='2'" src="@/static/img/index/emoji1.png" mode=""></image>
							<image class="icon" v-else-if="item.valueData=='1'" src="@/static/img/index/emoji4.png" mode=""></image>
							<view class="text">
								{{item.name}}
							</view>
						</view>
						<view class="info _df _jc">
							{{item.jsonValue.a +'-'+ item.jsonValue.b}}
						</view>
					</view>
				</view>
				<!-- <echarts-uniapp ref="echarts" :option="option" canvasId="echarts"></echarts-uniapp> -->
				<!-- <echarts ref="echarts" :option="option" canvasId="echarts"></echarts> -->
			</view>
			<view class="box2">
				<view class="title _df _ac">
					<image src="@/static/img/index/qxIcon2.png" mode=""></image>
					今日概览
				</view>
				<view class="list">
					<view class="item">
						<view class="num-box _df">
							<view class="num">
								{{infoData.min}}
							</view>
							<view class="dw">
								
							</view>
						</view>
						<view class="info">
							最低情绪值
						</view>
					</view>
					<view class="item">
						<view class="num-box _df">
							<view class="num">
								{{infoData.max}}
							</view>
							<view class="dw">
								
							</view>
						</view>
						<view class="info">
							最高情绪值
						</view>
					</view>
					<view class="item">
						<view class="num-box _df">
							<view class="num">
								{{infoData.avg}}
							</view>
							<view class="dw">
								
							</view>
						</view>
						<view class="info">
							平均情绪值
						</view>
					</view>
				</view>
			</view>
			<view class="box2">
				<view class="title _df _ac">
					<image src="@/static/img/index/qxIcon3.png" mode=""></image>
					情绪分布
				</view>
				<view class="chart" style="margin-top: -50rpx;padding-bottom: 50rpx;box-sizing: border-box;">
					<l-echart ref="chartRef2"></l-echart>
				</view>
			</view>
			<view class="box3 _df _jb _ac" @click="toView">
				<view class="">
					了解情绪值
				</view>
				<u-icon name="arrow-right" color="#888" size="28"></u-icon>
			</view>
		</view>
	</view>
</template>

<script>
	import * as echarts from 'echarts';
	import moment from "moment";

	export default {
		data() {
			return {
				myChart: null,
				chartInstance: null,
				option: {},
				option2: {},
				page:{
					begin: "",
					end: ""
				},
				xData:[],
				yData:[],
				format:'HH:mm',
				dateType:'日',
				infoData:{
					max:0,
					min:0,
					avg:0,
				},
				topData:{},
				fbData:{},
				min:0,
				max:0,
				glTitle:'今日概览',
				isEmpty:true,
				chartData:{},
				tipList:[]
				
			}
		},
		watch:{
			isEmpty(v){
				this.isEmpty = v
			}
		},
		created() {


		},
		mounted() {

		},
		onReady() {
			
		},
		onLoad() {
			// this.$nextTick(()=>{
			// 	this.initChart2();
			// })

		},
		onShow() {
			// this.getData()
		},

		methods: {
			getData(){
				let that = this
				this.chartData = {}
				uni.$_post({
					url: "getEmotion",
					that: that,
					params: that.page,
					success(res) {
						if(res.code == 0){
							that.chartData = res.data.one;
							if(res.data.topData.createTime){
								res.data.topData.createTime = uni.$_momentTime(res.data.topData.createTime,'HH:mm')
							}
							if(that.dateType != '日'){
								res.data.topData.value = res.data.two.min + '-' +res.data.two.max
							}
							that.topData = res.data.topData;
							if(res.data.two){
								that.infoData = res.data.two;
							}
							if(res.data.three){
								that.fbData = res.data.three;
							}
							if(res.data.emotionIndex){
								that.tipList = res.data.emotionIndex;
							}
							if(that.dateType == '日'){
								if(that.chartData.dataList[0]){
									that.min = uni.$_momentTime(that.chartData.dataList[0][0])
								}
								that.max = uni.$_momentTime(that.page.begin,'YYYY-MM-DD 23:59:59')
							}else{
								that.min = uni.$_momentTime(that.page.begin,'YYYY-MM-DD HH:mm:ss')
								that.max = uni.$_momentTime(that.page.end,'YYYY-MM-DD HH:mm:ss')
							}
							that.initChart(that.chartData);
							that.initChart2(that.fbData);
						}else{
							uni.showToast({
								title: res.msg,
								duration: 2000,
								icon:'error'
							});
						}
					},
					fail(err) {
						uni.showToast({
							title: err.msg,
							duration: 1000,
							icon:'error'
						});	
					},
				});
			},
			timeBack(e) {
				console.log(e, 666)
				if(e.dateTxt == '周'){
					this.format = 'MM-DD'
					this.glTitle = '本周概览'
				}else if(e.dateTxt == '月'){
					this.format = 'MM-DD'
					this.glTitle = '本月概览'
				}else{
					this.format = 'HH:mm'
					this.glTitle = '今日概览'
				}
				this.dateType = e.dateTxt
				this.page.begin = e.sTime
				this.page.end = e.eTime
				this.getData()
				
			},
			toView(){
				uni.navigateTo({
					url:'/pages/comA/details?title=了解情绪值' + '&type=3693'
				})
			},
			init() {
				// chart 图表实例不能存在data里
				this.$refs.chartRef.init(this.$echarts, chart => {
					chart.setOption(this.option);
				});
				this.$refs.chartRef2.init(this.$echarts, chart => {
					chart.setOption(this.option2);
				});

			},
			initChart(chartData) {
				let that = this
				let dataZoom = []
				if(!chartData.dataList || chartData.dataList.length==0) {
					this.isEmpty = true
					this.$refs.chartRef.clear()
					// return
					dataZoom = []	
				}else{
					this.isEmpty = false
					if(this.dateType != '周'){
						dataZoom = [
						    {
						      type: 'inside',
						      start: 0,
						      end: 55,
							  show:false
						    },
						    {
						      start: 0,
						      end: 50,
							  show:false
						    },
							
						  ]
					}
				}
				let yData = chartData.dataList
				this.option = {
					tooltip: {
						trigger: 'axis',
						triggerOn:'click',
						axisPointer: { // 坐标轴指示器，坐标轴触发有效
							type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
						},
						confine: true,
						formatter: function (params) {
							// if(that.dateType == '日') return
							// params 是一个数组，数组中包含每个系列的数据信息
							let result = '';//收缩压信息窗结果
							let arr = []//总数组
							arr = params
							// console.log(arr,999)
							let valArr = []//收缩压数组
							let newArr = []//收缩压时间相同数组
							let name = ''//时间
							let marker = ''
							let seriesName = ''
							
							let tag = ''
							arr.forEach(function (item) {
								// item 是每一个系列的数据
								seriesName = item.seriesName; // 系列名称
								marker = item.marker; // 系列名称
								 // 数据值
								 let value = ''
								if(that.dateType != '日'){
									value = item.value[0].split(' ')[0];
									name = item.value[0].slice(0,10)
								}else{
									value = item.value[0];
									name = item.value[0]
								}
								let value2 = Number(item.value[1])  // 数据值
								if(value2>=80){
									tag = '难过'
								}else if(value2>=70){
									tag = '不安'
								}else if(value2>=60){
									tag = '平静'
								}else if(value2>=30){
									tag = '不错'
								}else if(value2>=1){
									tag = '愉悦'
								}
								
								
								let obj = {
									time:value,
									val:value2
								}
								valArr.push(obj)
								 // 标志图形
								// console.log(value,633)
								result += `${item.marker}${seriesName}: ${value}   ${value2}`;
							});
							let newVal = []
							newArr = valArr.filter((item, index) => valArr.indexOf(item.time) !== index)
							newArr.map(item =>{
								newVal.push(item.val)
							})
							const max = Math.max(...newVal);
							const min = Math.min(...newVal);
							// console.log(valArr,111)
							// console.log(valArr2,222)
							// console.log(newArr,333)
							// console.log(max,'最大')
							// console.log(min,'最小')
							
							if(arr.length<=2){
								result = `${marker}${seriesName}: ${min}`;
							}else{
								result = `${marker}${seriesName}: ${min}-${max}`;
							}
							return name +'\n' + result;
							
							
						}
					},
					color: ['#8385ff'],
					grid: {
						left: '8%',
						right: '2%',
						bottom: '4%',
						containLabel: true
					},
					xAxis: {
						show:that.isEmpty?false:true,
						type: 'time',
						boundaryGap: false,
						axisPointer: {
							type: 'shadow' // 阴影指示器
						},
						min:that.min,
						max:that.max,
						splitLine: {
							show: false //隐藏x轴那条线
						},
						// splitNumber:5,
						axisTick: {
							show: false //隐藏x轴的刻度
						},
						axisLine: {
							show: false
						},
						axisLabel: {
							showMaxLabel: true,
							interval: 'auto',
							boundaryGap: false,
							textStyle: {
								color: "#999",
								fontSize: '10',
								lineHeight: 36,
							},
							formatter: function(value, index) {
									return moment(value).format(that.format);
							}
						},

					},
					yAxis: {
						show:that.isEmpty?false:true,
						type: 'value',
						position: 'right',
						max:that.tipList[0].jsonValue.b,
						min:0,
						// interval:4,
						axisLabel: {
							boundaryGap: false,
							textStyle: {
								color: "#999",
								fontSize: '10',
							}
						}
					},
					dataZoom: dataZoom,
					series: [{
						name: '情绪值',
						// type: 'line',
						type: 'scatter',
						symbolSize: 5,
						// stack: 'Total',
						// showSymbol: false,
						// smooth: 0.8,
						// areaStyle: {
						// 	opacity: 0.8,
						// 	color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
						// 			offset: 1,
						// 			color: '#fff',
						// 			opacity: 0.5,
						// 		},
						// 		{
						// 			offset: 0,
						// 			color: '#8489fe',
						// 		}
						// 	])
						// },
						// emphasis: {
						// 	focus: 'series'
						// },
						data: yData,

					}]
					
				}
				this.$refs.chartRef.init(this.$echarts, chart=> {
					chart.setOption(this.option);
				});
				
				setTimeout(()=>{
					this.$refs.chartRef.setOption(this.option)
				},100)
				
			},
			initChart2(data){
				let that = this
				let yData = data
				//情绪分布
				this.option2 = {
					tooltip: {
						trigger: 'item',
						valueFormatter: function(value) {
							return value + ' 次'
						}
					},
					legend: {
						show: true,
						top: 'auto',
						bottom: 0,
						data: ['愉悦', '不错', '平静', '不安', '难过'],
						
					},
					color: ['#ffc7c5', '#ffddca', '#dbefcb', '#d0efe8', '#d0d1f2'],
					series: [{
						name: '',
						type: 'pie',
						radius: ['30%', '70%'],
						avoidLabelOverlap: false,
						label: {
							show: false,
						},
						emphasis: {
							label: {
								show: false,
								fontSize: '40',
								fontWeight: 'bold'
							}
						},
						labelLine: {
							show: false
						},
						bottom: 20,
						data: [
							{
								value: yData.cheerful,
								name: '愉悦'
							},
							{
								value: yData.notBad,
								name: '不错'
							},
							{
								value: yData.calm,
								name: '平静'
							},
							{
								value: yData.anxious,
								name: '不安'
							},
							{
								value: yData.sad,
								name: '难过'
							},
							
						]
					}]
				}
				this.$refs.chartRef2.init(this.$echarts, chart=> {
					chart.setOption(this.option2);
				});
				setTimeout(()=>{
					this.$refs.chartRef2.setOption(this.option2)
				},200)
			}

		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 0 30rpx 100rpx;

		.tip-box{
			margin-bottom: 10rpx;
			margin-top: -30rpx;
			padding: 20rpx 30rpx 10rpx;
			.item{
				flex: 1;
				.name{
					.icon{
						width: 30rpx;
						height: 30rpx;
						// margin: 0 auto;
						display: block;
					}
					.text{
						font-size: 22rpx;
						color: #333;
						font-family: $uni-font-family-Bold;
						margin: 0 5rpx;
					}
				}
				
				.info{
					font-size: 22rpx;
					color: #333;
					font-family: $uni-font-family-Bold;
				}
			}
		}

		.box2 {
			background: #ffffff;
			border-radius: 24rpx;
			box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.10);
			padding: 40rpx 30rpx 10rpx;
			margin-bottom: 30rpx;

			.title {
				padding-bottom: 40rpx;
				border-bottom: 1rpx solid #eee;
				color: #171717;
				font-family: $uni-font-family-Bold;
				font-size: 28rpx;

				image {
					width: 60rpx;
					height: 60rpx;
					margin-right: 20rpx;
				}
			}

			.list {
				padding-top: 40rpx;
				display: flex;
				flex-wrap: wrap;

				.item {
					width: 50%;
					padding-left: 50rpx;
					padding-top: 10rpx;
					box-sizing: border-box;
					margin-bottom: 50rpx;
					position: relative;

					&::before {
						display: block;
						content: '';
						width: 1rpx;
						height: 70rpx;
						background-color: #e2e2e2;
						position: absolute;
						top: 50%;
						right: 0;
						margin-top: -35rpx;
					}

					.num-box {
						height: 58rpx;
						line-height: 58rpx;
						font-family: $uni-font-family-Bold;
						font-size: 50rpx;
						color: #171717;
						margin-right: 4rpx;

						.dw {
							font-size: 24rpx;
							line-height: 70rpx;
						}
					}

					.info {
						height: 48rpx;
						line-height: 48rpx;
						font-family: $uni-font-family-Medium;
						font-size: 24rpx;
						color: #222;
					}
				}

				.item:nth-child(2),
				.item:nth-child(4) {
					&::before {
						display: none;
					}
				}
			}
		}

		.box3 {
			background: #ffffff;
			border-radius: 24rpx;
			box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.10);
			height: 130rpx;
			padding: 0 30rpx;
			color: #222;
			font-family: $uni-font-family-Bold;
			font-size: 28rpx;
		}
	}
</style>